<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';

const { $fetch } = useFetch();

const templates = import.meta.glob('./templates/*/index.vue', {
  eager: false,
  import: 'default',
}) as Record<string, any>;

const { data } = useAsyncData<Record<string, any>, Record<string, any>>(
  'home:index',
  () => $fetch('/template/queryTemplateByCommunityId'),
  {
    default: () => ({}),
    transform: (data) => JSON.parse(data.tempControl) ?? {},
  },
);
</script>

<template>
  <main class="page-home">
    <Component
      :is="defineAsyncComponent(templates[`./templates/${data.type}/index.vue`])"
      :options="data.options"
      v-if="data?.type && templates[`./templates/${data.type}/index.vue`]"
    />
  </main>
</template>

<style lang="scss" scoped>
</style>
